<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ report.title }}</title>
    <style>
        body {
            font-family: "SimHei", "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 30px;
        }
        .header h1 {
            margin: 0;
            color: #333;
            font-size: 24px;
        }
        .header p {
            margin: 10px 0 0;
            color: #666;
            font-size: 14px;
        }
        .section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .section h2 {
            color: #2c3e50;
            font-size: 20px;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .stat-card h3 {
            margin: 0 0 10px;
            font-size: 16px;
            color: #666;
        }
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
        }
        .chart-container {
            margin: 20px 0;
            text-align: center;
        }
        .chart-container img {
            max-width: 100%;
            height: auto;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        .topic-list {
            list-style: none;
            padding: 0;
        }
        .topic-item {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .topic-item h3 {
            margin: 0 0 10px;
            font-size: 18px;
            color: #2c3e50;
        }
        .topic-item .meta {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .article-list {
            list-style: none;
            padding: 0;
            margin: 15px 0 0;
        }
        .article-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .article-item:last-child {
            border-bottom: none;
        }
        .sentiment-positive {
            color: #27ae60;
        }
        .sentiment-negative {
            color: #e74c3c;
        }
        .sentiment-neutral {
            color: #3498db;
        }
        .footer {
            text-align: center;
            padding: 20px 0;
            color: #666;
            font-size: 14px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        table th, table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .keyword-tag {
            display: inline-block;
            background-color: #e1f5fe;
            color: #0288d1;
            padding: 5px 10px;
            border-radius: 15px;
            margin: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{ report.title }}</h1>
            <p>生成时间: {{ report.generation_time }}</p>
            <p>时间范围: {{ report.time_range.start }} 至 {{ report.time_range.end }} ({{ report.time_range.days }}天)</p>
        </div>

        <!-- 基本统计数据 -->
        {% if report.statistics %}
        <div class="section">
            <h2>1. 基本统计数据</h2>
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>总内容数</h3>
                    <div class="value">{{ report.statistics.total_count }}</div>
                </div>
                <div class="stat-card">
                    <h3>文章数</h3>
                    <div class="value">{{ report.statistics.article_count }}</div>
                </div>
                <div class="stat-card">
                    <h3>社交媒体帖子数</h3>
                    <div class="value">{{ report.statistics.social_post_count }}</div>
                </div>
            </div>

            <h3>情感分布</h3>
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>正面</h3>
                    <div class="value sentiment-positive">{{ report.statistics.sentiment_distribution.positive }}</div>
                </div>
                <div class="stat-card">
                    <h3>负面</h3>
                    <div class="value sentiment-negative">{{ report.statistics.sentiment_distribution.negative }}</div>
                </div>
                <div class="stat-card">
                    <h3>中性</h3>
                    <div class="value sentiment-neutral">{{ report.statistics.sentiment_distribution.neutral }}</div>
                </div>
            </div>

            <h3>热门关键词</h3>
            <div>
                {% for keyword in report.statistics.top_keywords %}
                <span class="keyword-tag">{{ keyword }}</span>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- 情感分析 -->
        {% if report.sentiment_analysis %}
        <div class="section">
            <h2>2. 情感分析趋势</h2>
            {% if report.sentiment_analysis.chart_image %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ report.sentiment_analysis.chart_image }}" alt="情感分析趋势图">
            </div>
            {% endif %}
            <p>在分析期间，情感分布呈现以下特点：</p>
            <ul>
                <li>正面情感占比: {{ report.sentiment_analysis.positive_percentage }}%</li>
                <li>负面情感占比: {{ report.sentiment_analysis.negative_percentage }}%</li>
                <li>中性情感占比: {{ report.sentiment_analysis.neutral_percentage }}%</li>
            </ul>
        </div>
        {% endif %}

        <!-- 热点话题 -->
        {% if report.hot_topics %}
        <div class="section">
            <h2>3. 热点话题</h2>
            <ul class="topic-list">
                {% for topic in report.hot_topics %}
                <li class="topic-item">
                    <h3>{{ topic.keyword }}</h3>
                    <div class="meta">
                        <span>相关文章数: {{ topic.total_articles }}</span>
                        <span>情感分布: 
                            <span class="sentiment-positive">正面({{ topic.sentiment_distribution.正面 }})</span> | 
                            <span class="sentiment-negative">负面({{ topic.sentiment_distribution.负面 }})</span> | 
                            <span class="sentiment-neutral">中性({{ topic.sentiment_distribution.中性 }})</span>
                        </span>
                    </div>
                    {% if topic.articles %}
                    <h4>相关文章:</h4>
                    <ul class="article-list">
                        {% for article in topic.articles %}
                        <li class="article-item">
                            <div>{{ article.title }}</div>
                            <div style="font-size: 12px; color: #666;">
                                来源: {{ article.source }} | 
                                情感: 
                                {% if article.sentiment == '正面' %}
                                <span class="sentiment-positive">{{ article.sentiment }}</span>
                                {% elif article.sentiment == '负面' %}
                                <span class="sentiment-negative">{{ article.sentiment }}</span>
                                {% else %}
                                <span class="sentiment-neutral">{{ article.sentiment }}</span>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <!-- 地域分布 -->
        {% if report.location_distribution %}
        <div class="section">
            <h2>4. 地域分布</h2>
            {% if report.location_distribution.chart_image %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ report.location_distribution.chart_image }}" alt="地域分布图">
            </div>
            {% endif %}
            
            {% if report.map_data and report.map_data.map_config %}
            <div id="mapChart" style="width: 100%; height: 500px;"></div>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/map/js/china.js"></script>
            <script>
                var mapChart = echarts.init(document.getElementById('mapChart'));
                var mapConfig = {{ report.map_data.map_config|safe }};
                mapChart.setOption(mapConfig);
            </script>
            {% endif %}
            
            {% if report.location_distribution.locations %}
            <h3>主要地域分布</h3>
            <table>
                <thead>
                    <tr>
                        <th>地域</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in range(report.location_distribution.locations|length) %}
                    <tr>
                        <td>{{ report.location_distribution.locations[i] }}</td>
                        <td>{{ report.location_distribution.counts[i] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
        {% endif %}

        <!-- 媒体来源分布 -->
        {% if report.source_distribution %}
        <div class="section">
            <h2>5. 媒体来源分布</h2>
            {% if report.source_distribution.chart_image %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ report.source_distribution.chart_image }}" alt="媒体来源分布图">
            </div>
            {% endif %}
            
            {% if report.source_distribution.sources %}
            <h3>主要媒体来源</h3>
            <table>
                <thead>
                    <tr>
                        <th>来源</th>
                        <th>数量</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in range(report.source_distribution.sources|length) %}
                    <tr>
                        <td>{{ report.source_distribution.sources[i] }}</td>
                        <td>{{ report.source_distribution.counts[i] }}</td>
                        <td>{{ report.source_distribution.percentages[i] }}%</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
        {% endif %}

        <!-- 声量趋势 -->
        {% if report.volume_trend %}
        <div class="section">
            <h2>6. 声量趋势</h2>
            {% if report.volume_trend.chart_image %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ report.volume_trend.chart_image }}" alt="声量趋势图">
            </div>
            {% endif %}
            
            <p>在分析期间，内容发布量呈现以下特点：</p>
            <ul>
                <li>平均每日发布量: {{ report.volume_trend.average_daily_volume }}</li>
                <li>最高发布量: {{ report.volume_trend.max_volume }} ({{ report.volume_trend.max_volume_date }})</li>
                <li>最低发布量: {{ report.volume_trend.min_volume }} ({{ report.volume_trend.min_volume_date }})</li>
            </ul>
        </div>
        {% endif %}

        <!-- 热点事件 -->
        {% if report.hot_events %}
        <div class="section">
            <h2>7. 热点事件</h2>
            <ul class="topic-list">
                {% for event in report.hot_events %}
                <li class="topic-item">
                    <h3>{{ event.title }}</h3>
                    <div class="meta">
                        <span>类型: {{ event.type }}</span>
                        <span>
                            {% if event.type == 'topic' %}
                            文章数: {{ event.count }}
                            {% else %}
                            聚类大小: {{ event.size }}
                            {% endif %}
                        </span>
                    </div>
                    
                    {% if event.keywords %}
                    <div>
                        {% for keyword in event.keywords %}
                        <span class="keyword-tag">{{ keyword }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    {% if event.articles %}
                    <h4>相关文章:</h4>
                    <ul class="article-list">
                        {% for article in event.articles %}
                        <li class="article-item">
                            <div>{{ article.title }}</div>
                            <div style="font-size: 12px; color: #666;">
                                来源: {{ article.source }} | 
                                情感: 
                                {% if article.sentiment == '正面' %}
                                <span class="sentiment-positive">{{ article.sentiment }}</span>
                                {% elif article.sentiment == '负面' %}
                                <span class="sentiment-negative">{{ article.sentiment }}</span>
                                {% else %}
                                <span class="sentiment-neutral">{{ article.sentiment }}</span>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <!-- 趋势关键词 -->
        {% if report.trending_keywords %}
        <div class="section">
            <h2>8. 趋势关键词</h2>
            <div>
                {% for keyword in report.trending_keywords %}
                <div style="margin-bottom: 10px; padding: 10px; background-color: #f9f9f9; border-radius: 5px;">
                    <h3 style="margin: 0 0 5px;">{{ keyword.keyword }}</h3>
                    <div style="display: flex; justify-content: space-between; font-size: 14px; color: #666;">
                        <span>频率: {{ keyword.frequency }}</span>
                        <span>文章数: {{ keyword.article_count }}</span>
                        <span>社交媒体帖子数: {{ keyword.social_post_count }}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- 地域情感分布 -->
        {% if report.location_sentiment %}
        <div class="section">
            <h2>9. 地域情感分布</h2>
            {% if report.location_sentiment.chart_image %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ report.location_sentiment.chart_image }}" alt="地域情感分布图">
            </div>
            {% endif %}
            
            {% if report.location_sentiment.locations %}
            <h3>主要地域情感分布</h3>
            <table>
                <thead>
                    <tr>
                        <th>地域</th>
                        <th>正面</th>
                        <th>负面</th>
                        <th>中性</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in range(report.location_sentiment.locations|length) %}
                    <tr>
                        <td>{{ report.location_sentiment.locations[i] }}</td>
                        <td class="sentiment-positive">{{ report.location_sentiment.positive_counts[i] }}</td>
                        <td class="sentiment-negative">{{ report.location_sentiment.negative_counts[i] }}</td>
                        <td class="sentiment-neutral">{{ report.location_sentiment.neutral_counts[i] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
        {% endif %}

        <div class="footer">
            <p>© {{ report.generation_time.split('-')[0] }} 舆情监控系统 - 自动生成报告</p>
        </div>
    </div>
</body>
</html> 